{% extends "base.html" %}
{% load static %}
{% load common_filters %}

{% block title %}
    Teacher Dashboard | {{ block.super }}
{% endblock title %}

{% block stylesheets %}
  {{ block.super }}
  <style type="text/css">
  /* Align vertically a column */
  .v-align {
      vertical-align: middle !important;
  }
  div.col-sm-3 a.active {
    background:#1ca59e;
  }
  div.m-b-xs select {
    float: right;
  }
  div.m-b-xs button {
    float: right;
  }
  </style>
{% endblock stylesheets %}

{% block content %}

  {% include "_teacher_sidebar.html" %}

  <!--main content start-->
  <section id="main-content">

     <section class="wrapper">

        <div class="table-agile-info">
           <div class="panel panel-default">

              <div class="panel-heading">
                 {{ view.section_title }}
              </div>

              {% if not view.is_slug_view %}
                {% include "_course_tabs.html" %}
              {% endif %}

              <div class="row w3-res-tb">

                 <div class="col-sm-3">
                    {% include "_search_form.html" %}
                 </div>

                 <div class="col-sm-6">
                 </div>

                 <div class="col-sm-3 m-b-xs" id="taskselect">
                  <button class="btn btn-sm btn-default" id="bulk_update">Apply</button>
                  {% for field in view.taskselect %}
                    {{ field }}
                  {% endfor %}
                 </div>

              </div>

              {% if user_list %}
              <div class="table-responsive">
                 <table class="table b-t b-light">
                    <thead>
                       <tr>
                        <th>Username</th>
                        <th>Create Interview</th>
                        <th>Interviews</th>
                        <th>Status</th>
                        <th>Assignee</th>
                        <th style="width:20px;">
                          <label class="i-checks m-b-none">
                            <input type="checkbox" id="checkall"><i></i>
                          </label>
                        </th>
                       </tr>
                    </thead>
                    <tbody>
                      {% for user in user_list %}

                            {% with row_span=user.interviews_taken.all|length %}
                              {% for interview in user.interviews_taken.all %}
                                {% with task=interview.task %}
                                <tr>
                                {% if forloop.first %}
                                  <td class="v-align" rowspan="{{ row_span }}">
                                    <a href="{% url "course:student_detail" user.pk view.course_id view.course_slug %}">{{user.username}}</a>
                                  </td>
                                  <td rowspan="{{ row_span }}" class="v-align">
                                    <a href="{% url "interview:create" user.pk view.course_id %}" >
                                    <span class="label label-success">Add</span></a>
                                  </td>

                                  <td>
                                    <a href="{% url 'interview:update_contents' interview.pk view.course_id %}">{{interview.title}}</a>
                                  </td>
                                  <td>
                                    <span class="label label-success">{{task.status}}</span>
                                  </td>
                                  <td>
                                    <div class="assignee-select" data-assignee_info="{{task.assignee.id}}" data-task_id="{{task.id}}"></div>
                                  </td>
                                  <td>
                                    <label class="i-checks m-b-none"><input type="checkbox" class="cb" data-task_type="interview" name="vehicle" data-task_id="{{task.pk}}"><i></i></label>
                                  </td>
                                {% else %}
                                  <td>
                                    <a href="{% url 'interview:update_contents' interview.pk view.course_id %}">{{interview.title}}</a>
                                  </td>
                                  <td>
                                    <span class="label label-success">{{task.status}}</span>
                                  </td>
                                  <td>
                                    <div class="assignee-select" data-assignee_info="{{task.assignee.id}}" data-task_id="{{task.id}}"></div>
                                  </td>
                                  <td>
                                    <label class="i-checks m-b-none"><input type="checkbox" class="cb" data-task_type="interview" name="vehicle" data-task_id="{{task.pk}}"><i></i></label>
                                  </td>
                                {% endif %}
                                </tr>
                                {% endwith %}
                                {% empty %}
                                <tr>
                                    <td>
                                        <a href="{% url "course:student_detail" user.pk view.course_id view.course_slug %}">{{user.username}}</a>
                                    </td>
                                    <td>
                                        <a href="{% url "interview:create" user.pk view.course_id %}" >
                                        <span class="label label-success">Add</span></a>
                                    </td>
                                    <td>
                                        <span class="label label-default">N/A</span>
                                    </td>
                                    <td>
                                        <span class="label label-default">N/A</span>
                                    </td>
                                    <td>
                                        <span class="label label-default">N/A</span>
                                    </td>
                                    <td>
                                        <span class="label label-default">N/A</span>
                                    </td>
                                    </tr>
                              {% endfor %}
                            {% endwith %}

                      {% endfor %}
                    </tbody>
                 </table>

              </div>

              <footer class="panel-footer">
                    {% include "_pagination.html" %}
              </footer>

              {% else %}
                <div class="well">No students yet.</label>
              {% endif %}

           </div>
        </div>
     </section>

  </section>
  <!--main content end-->

  {% include "_footer.html" %}

{% endblock content %}

{% block javascripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "laioffer/js/csrf.js" %}"></script>
    <script type="text/javascript" src="{% static "laioffer/js/rest/task.js" %}"></script>
    <script type="text/javascript" src="{% static "laioffer/js/task.js" %}"></script>
{% endblock javascripts %}
